<template>
	<view>
		<button :type="buttontype" @click="drawGraphical()">echarts</button>
		<button :type="buttontype" @click="changetextvalue()">获取位置</button>
		<button :type="buttontype" @click="getCompass()">指南针</button>
		<input type="text" v-model="phone" />
		<button :type="buttontype" @click="makeCall()">打电话</button>
		<view class="main" id="main" ref="container">

		</view>
	</view>
</template>

<script>
	import * as echarts from '../../components/echarts.js';
	export default {
		data() {
			return {
				phone: "13213802101",
				buttontype: "primary"
			};
		},
		mounted() {
			
		},
		onLoad() {
			this.textvalue = "456" //这里修改textvalue的值，其实123都来不及显示就变成了456  
			const query = uni.createSelectorQuery().in(this);
		},
		methods: {
			changetextvalue() {
				uni.getLocation({
					type:"wgs84",
					// altitude:true,
					// geocode:true,
					// isHighAccuracy:true,
					success:function(res){
						console.log(res)
					},
					fail:function(res){
						console.log(res)
					},
					complete:function(res){
						console.log(res)
					}
				})
			},
			getCompass(){
				uni.onCompassChange(function(res){
					console.log(res)
				})
			},
			//打电话
			makeCall(){
				uni.makePhoneCall({
				    phoneNumber: this.phone
				});
			},
			drawGraphical(){
				// const query = uni.createSelectorQuery().in(this);
				// console.log(query.select("#main"))
				// query.select('#main').boundingClientRect(data => {
				// 	console.log(data)
				// }).exec();
				
				// console.log(this.$refs.container)
				
				var chartDom = document.getElementById('main');
				var myChart = echarts.init(chartDom);
				var option = {
				  tooltip: {
				    trigger: 'item'
				  },
				  legend: {
				    top: '5%',
				    left: 'center'
				  },
				  series: [
				    {
				      name: 'Access From',
				      type: 'pie',
				      radius: ['40%', '70%'],
				      avoidLabelOverlap: false,
				      itemStyle: {
				        borderRadius: 10,
				        borderColor: '#fff',
				        borderWidth: 2
				      },
				      label: {
				        show: false,
				        position: 'center'
				      },
				      emphasis: {
				        label: {
				          show: true,
				          fontSize: '40',
				          fontWeight: 'bold'
				        }
				      },
				      labelLine: {
				        show: false
				      },
				      data: [
				        { value: 1048, name: 'Search Engine' },
				        { value: 735, name: 'Direct' },
				        { value: 580, name: 'Email' },
				        { value: 484, name: 'Union Ads' },
				        { value: 300, name: 'Video Ads' }
				      ]
				    }
				  ]
				};
				
				option && myChart.setOption(option);
			}
		}
	}
</script>
<style scoped>
	.main {
		height: 500rpx;
		width: 500rpx;
	}
</style>
